<template  xmlns:th="http://www.thymeleaf.org">
    <el-tooltip effect="light"  placement="bottom">
        <div class="el-icon-user-solid admin">{{username}}</div>
    </el-tooltip>

    <table :data="tableData" stripe class=" col table table-light table-hover">
        <thead class="col">
        <tr style="width: 70%" class="col">
            <th>贪吃蛇</th>
            <th>弹弹球</th>
            <th>Flybird</th>
            <th>飞机大战</th>
            <th>冲浪跑酷</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td prop="snake">{{tableData[0].snake}}</td>
            <td prop="ball">{{tableData[0].ball}}</td>
            <td porp="flyBird">{{tableData[0].flyBird}}</td>
            <td porp="planewar">{{tableData[0].planewar}}</td>
            <td porp="parkour">{{tableData[0].parkour}}</td>
        </tr>

        </tbody>
    </table>

<!--    <el-table class="offset-2" :data="tableData"-->
<!--            stripe-->
<!--            style="width: 70%">-->
<!--        <el-table-column-->
<!--                prop="date"-->
<!--                label="贪吃蛇" width="180">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--                prop="name"-->
<!--                label="弹弹球"-->
<!--                width="180">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--                prop="address"-->
<!--                label="flybird"-->
<!--                width="180">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--                prop="planewar"-->
<!--                label="飞机大战">-->
<!--        </el-table-column>-->

<!--    </el-table>-->
    <div class="row">
        <img src="../assets/tanchishe.png" class="col-sm-1 offset-md-1 tanchishe rounded img-fluid" @click="tanchishe"/>
        <img src="../assets/tantanqiu.png" class="col-sm-1 offset-md-1 tantanqiu rounded img-fluid" @click="ball"/>
        <img src="../assets/bird.png" class="col-sm-1 offset-md-1 flybird rounded img-fluid" @click="flybird"/>
        <img src="../assets/Planewar.png" class="col-sm-1 offset-md-1 planewar rounded img-fluid" @click="planewar"/>
    </div>
    <br/>
    <div class="row">
        <img src="../assets/3dplanewar/Parkour_icon.jpg" class="col-sm-1 offset-md-1 Parkour rounded img-fluid" @click="Parkour"/>
    </div>

<br/>

<!--<About/>-->
</template>

<script>
    import Common from '../components/common'
    //import About from '../views/About'
    const axios=require('axios')
    // @ is an alias to /src
    export default {
        name: 'home',
        // components:{About},
        data() {
            return {
                //username:this.$store.state.username,
                username:this.$cookies.get("username"),
                tableData: [{
                    snake: '',
                    ball: '',
                    flyBird: '',
                    planewar:'',
                    parkour:'',
                }, ]
            }
        },

        mounted(){
            let data=new URLSearchParams()
            data.append('username',this.username)
            console.log(this.$store.state.username)
            axios.post('/user/getscore',data).then(res =>{
                console.log(res.data)
                this.tableData[0].snake=res.data[0]
                this.tableData[0].ball=res.data[1]
                this.tableData[0].flyBird=res.data[2]
                this.tableData[0].planewar=res.data[3]
                this.tableData[0].parkour=res.data[4];
            })
        },

        methods:{
            tanchishe(){
                console.log(this.tableData[0].snake)
                this.$router.push("/snake");
            },

            ball(){
                this.$router.push("/ball");
            },

            flybird(){
                this.$router.push("/flybird");
            },
            planewar(){
                this.$router.push("/planewar");
            },

            Parkour(){
                this.$router.push("/Parkour")
            }
        }

    }
</script>

<style scoped>
.tanchishe{
    height: 150px;
    width: 225px;
}
    .tantanqiu{
        height: 150px;
        width: 225px;
    }
.flybird{
    height: 150px;
    width: 225px;
}

.planewar{
    height: 150px;
    width: 225px;
    background-repeat: no-repeat;
}
.Parkour{
    height: 150px;
    width: 225px;
    background-repeat: no-repeat;
}
</style>